import { useState } from 'react'
import { CloseCircleOutlined } from '@ant-design/icons'
import './index.scss'
import GlobalDialog from 'components/GlobalDialog'
import { Button } from 'antd'
import React from 'react'

type contentObjType = {
    id: string
    date: number
    content: string
    time: number
}
const SecoundPage = () => {
    // 是否显示弹窗
    const [showDialog, setShowDialog] = useState(false)
    // 需要操作的列表索引
    const [doIndex, setDoIndex] = useState(-1)
    // 获取相对时间
    const getRelativeTime = (number: number) => {
        let time = 0
        let unit = ''
        if (number < 60) {
            time = number
            unit = '秒'
        } else if (number < 60 * 60) {
            time = Math.floor(number / 60)
            unit = '分'
        } else {
            time = Math.floor(number / 60 / 60)
            unit = '小时'
        }
        return { time, unit }
    }
    // 处理点击 item 组件
    const handleClickItem: React.MouseEventHandler<HTMLDivElement> = (
        event: React.MouseEvent<HTMLDivElement, MouseEvent>
    ) => {
        console.log(event)
        return false
    }
    // 处理点击 a 标签
    const handleClickA: React.MouseEventHandler<HTMLAnchorElement> = (
        event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
    ) => {
        console.log(event)
        event.preventDefault()
    }
    // 删除元素
    const handleDeleted = (index: number) => {
        const item: contentObjType = list[index]
        console.log('deleted', item, index)
        list.splice(index, 1)
        setList([...list])
    }
    // 列表子组件
    const ListItem = (props: {
        data: contentObjType
        index: number
        onClick?: React.MouseEventHandler<HTMLDivElement>
        onDel?: React.MouseEventHandler<HTMLDivElement>
    }) => {
        const { data, index, onClick } = props
        const date = new Date(data.date)

        const itemTime = getRelativeTime(data.time)
        return (
            <div className='record-item'>
                <div
                    className='record-item-date'
                    data-index={index}
                    onClick={onClick}
                >
                    <div className='rid-month'>
                        {`${date.getMonth() + 1} 月`}
                    </div>
                    <div className='rid-day'>{date.getDate()}</div>
                </div>
                <div className='record-item-content'>
                    <div className='ric-text'>{data.content}</div>
                    <div className='ric-time'>
                        {' '}
                        {`${itemTime.time}${itemTime.unit}`}{' '}
                    </div>
                </div>
                <div className='record-item-close' onClick={props.onDel}>
                    <CloseCircleOutlined />
                </div>
            </div>
        )
    }
    // 列表数据
    const [list, setList] = useState<Array<contentObjType>>(
        new Array(40).fill(null).map((_, index, arr) => {
            return {
                id: index.toString(),
                date:
                    new Date().getTime() -
                    (arr.length * 2 - index * 2) * 1000 * 60 * 60 * 24,
                content: 'Hello World',
                time: Math.floor(Math.random() * 60 * 60 * 24),
            }
        })
    )
    // 关闭确认删除弹窗
    const handleCloseDialog = () => {
        setShowDialog(false)
        setDoIndex(-1)
    }
    return (
        <div className='study-record'>
            <a
                href='http://www.baidu.com'
                target='_black'
                onClick={handleClickA}
            >
                百度一下你就知道
            </a>
            {list.map((item: contentObjType, index: number) => (
                <ListItem
                    data={item}
                    index={index}
                    key={item.id}
                    onClick={handleClickItem}
                    onDel={() => {
                        setDoIndex(index)
                        setShowDialog(true)
                    }}
                ></ListItem>
            ))}
            {showDialog && (
                <GlobalDialog onClose={handleCloseDialog}>
                    <div className='title'>该操作不可逆！是否确定</div>
                    <React.Fragment key='footer'>
                        {/* <div key='footer' className='footer'> */}
                        <Button
                            type='primary'
                            onClick={() => {
                                handleDeleted(doIndex)
                                handleCloseDialog()
                            }}
                        >
                            确定
                        </Button>
                        <Button onClick={handleCloseDialog}>取消</Button>
                        {/* </div> */}
                    </React.Fragment>
                </GlobalDialog>
            )}
        </div>
    )
}
export default SecoundPage
